<template>
  <view id="terminalSwitch">
    <view class="title">请选择要切换的业务线</view>
    <view class="businessLine">
      <view class="businessLine-item" :style="{ 'background': itemColor(index) }" v-for="(item, index) in businessLines" :key="index" @click="selectItem(item)">
        <view class="item-name">
          {{ item.name }}
        </view>
        <view class="item-percentage">
          {{ item.percentage }}
        </view>
        <view class="item-yj">{{ item.yj }}</view>
      </view>
    </view>
  </view>
</template>

<script>
const api = require('../../config/api')
const util = require('../../utils/util')
export default {
  name: 'terminalSwitch',
  data() {
    return {
      // 业务线数据列表
      businessLines: []
    }
  },
  onLoad: function (options) {
    this.getBusinessLines()
  },
  methods: {
    // 获取业务线列表
    getBusinessLines() {
      util.request(api.machineChangeUrl+'/'+0, {}, 'POST').then((res) => {
        console.log(res)
        if (res.code !== 0) {
          uni.showToast({
            title: res.message,
            icon: 'none'
          })
        } else {
          this.businessLines = (res.data || []).map((item) => {
            let names = item.name.split('\n')
            let newObj = {
              value: item.value,
              namePre: item.name,
              name: names[0],
              percentage: names[1],
              yj: names[2]
            }
            return newObj
          })
        }
      })
    },
    // 根据索引返回不同的背景颜色
    itemColor(index) {
      const colors = [
        'linear-gradient(135deg, #db3238, #f95960)', // 红色渐变
        'linear-gradient(135deg, #4a4a4a, #656565)', // 灰色渐变
        'linear-gradient(135deg, #f9a54a, #f3902f)', // 橙色渐变
        'linear-gradient(135deg, #66f0d5, #57cdfc)' // 蓝绿色渐变
      ]
      return colors[index % 4] // 循环使用4种颜色
    },

    // 选择业务线项目
    selectItem(item) {
      uni.setStorageSync('businessItem', item) // 存储选中的业务线
	  console.log(item);
      uni.navigateTo({
        url: `/pages/terminalSwitch/switchPage?value=${item.value}` // 跳转到切换页面并传递ID
      })
    }
  }
}
</script>

<style lang="scss" scoped>
#terminalSwitch {
  .title {
    text-align: center;
    padding: 20rpx;
    font-size: 32rpx;
  }
  .businessLine {
    padding: 0 3%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    .businessLine-item {
      width: 21%;
      margin-bottom: 20rpx;
      border-radius: 8rpx;
      padding: 20rpx 0;
      box-sizing: border-box;
      text-align: center;
      color: white;
      &:nth-child(3n-1) {
        margin: 0 18% 20rpx;
      }

      .header {
        font-size: 28rpx;
        margin-bottom: 10rpx;
      }

      .item-percentage,
      .item-name,
      .item-yj,
      .item-card {
        font-size: 24rpx;
        margin-top: 8rpx;
      }
    }
  }
}
</style>
